<template>
  <div>
    <el-table border :data="sortList" style="max-width:600px">
      <el-table-column align="center" width="120px" label="كۆرۈنۈش تەرتىپى" prop="xh">
        <template slot-scope="{row}">
          <el-input v-model="row.xh" size="small" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="ID" prop="value">
        <template slot-scope="{row}">
          <el-input v-model="row.value" size="small" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="تۈر ئىسمى" prop="label">
        <template slot-scope="{row}">
          <el-input class="direction-rtl" v-model="row.label" size="small" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="option" label="مەشغۇلات">
        <template slot-scope="{row,$index}">
          <el-button type="danger" size="medium" @click="deleteSort(row,$index)">يۇيۇش</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row :gutter="2" style="margin-top:24px">
      <el-button size="medium" type="primary" @click="save">ساقلاش</el-button>
      <el-button size="medium" type="primary" @click="creteNew">يېڭى تۈر قېتىش</el-button>
    </el-row>
  </div>
</template>

<script>
import { getVideoSort, saveVideoSort } from '@/api/kino';
export default {
  name: 'SortSetting',
  components: {},
  data() {
    return {
      info: {},
      sortList: []
    };
  },
  created() {
    getVideoSort({ user: this.$store.state.user.name }).then(res => {
      console.log(res);
      this.info = res;
      let sortList = res.setting_content;
      this.sortList = JSON.parse(sortList)
    })
  },
  mounted() {

  },
  methods: {
    creteNew() {
      this.sortList.push({ label: '', value: '' })
    },
    save() {
      if (this.sortList.some(item => (!item.value || !item.label))) {
        this.$message.error('تۇللۇق كىرگۈزۈڭ')
      } else {
        this.$loading();
        this.sortList.sort((a, b) => a.xh - b.xh)
        saveVideoSort({
          user: this.info.user,
          setting_name: this.info.setting_name,
          setting_content: JSON.stringify(this.sortList)
        }).then(res => {
          if (res.affectedRows == 1) {
            this.$message.success('مۇۋەپپەقىيەتلك بولدى')
          }
          this.$loading().close()
        }).catch(err => {
          this.$loading().close()
        })
      }
    },
    deleteSort(row, index) {
      this.sortList.splice(index, 1)
      //   console.log(row, index);
    }
  },
};
</script>

<style scoped lang="scss">
</style>
